<template>
  <div>
    <el-container>
      <el-header>
        <div class="add">
          <i class="el-icon-s-unfold">产品列表</i>
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            size="mini"
            @click="addProduct"
            >添加商品</el-button
          >
        </div>
      </el-header>
      <el-main>
        <div class="search">
          <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
            <el-form-item label="蛋糕名称">
              <el-input v-model="sizeForm.names"></el-input>
            </el-form-item>
            <el-form-item label="蛋糕种类">
              <el-select v-model="sizeForm.family" clearable  placeholder="请选择蛋糕种类">
                <el-option label="蛋糕" value="蛋糕"></el-option>
                <el-option label="烘焙" value="烘焙"></el-option>
                <el-option label="配件" value="配件"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="口味">
              <el-select v-model="sizeForm.tastes" clearable  placeholder="请选择蛋糕种类">
                <el-option :label="item" :value="index+1" v-for="(item,index) in taste_type" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-button type="primary" size="small" style="margin-left: 10px"
              @click="findpro">查询</el-button
            >
          </el-form>
        </div>
        <div class="data">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="cakename" label="商品名称" width="180">
            </el-table-column>
            <el-table-column prop="family" label="种类" width="180">
            </el-table-column>
            <el-table-column
              prop="cake_label"
              label="商品特色"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="description"
              label="口味"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="type_description"
              label="优惠活动"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="sold_count"
              label="库存"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="product_price"
              label="价格"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="cake_description"
              label="商品描述"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <!-- 分页 -->
      <el-footer
        ><div class="block">
          <el-pagination
            layout="prev, pager, next, jumper"
            :total="Math.ceil(tableData.length)"
          >
          </el-pagination></div
      ></el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  mounted () {
    let url = '/v1/admin'
    this.$get(url).then(res=>{
      for(var k of res.data.data){
        this.taste_type.push(k.description);
      }
    // console.log(this.taste_type)
    });

    // 加载时加载全部数据
          let url1 = '/v1/admin/findpro';
      let params = {
        p_name:this.sizeForm.names,
        family:this.sizeForm.family,
        tastes:this.sizeForm.tastes
      }
      // console.log(params)
      this.$get(url1,params).then(res=>{
        this.tableData = res.data.data;
      //console.log(this.tableData,Math.ceil(res.data.data.length/10))
      })
  },
  data() {
    return {
      // 加载时返回口味种类
      taste_type:[],
      tableData: [
        {
          cakename: "慕斯蛋糕",
          family: "蛋糕",
          cake_label:"",
          description: "水果味",
          type_description: "生日会85折",
          sold_count: "热销",
          cake_price:100,
          cake_description: "一款特别好吃的蛋糕xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        },
      ],
      sizeForm: {
        names:'',
        family:'',
        tastes:'',
      },
    };
  },
  methods: {
    addProduct() {
      this.$router.push('/addcake');
    },
    findpro(){
      let url = '/v1/admin/findpro';
      let params = {
        p_name:this.sizeForm.names,
        family:this.sizeForm.family,
        tastes:this.sizeForm.tastes
      }
      // console.log(params)
      this.$get(url,params).then(res=>{
        this.tableData = res.data.data;
      //console.log(this.tableData,res.data.data)
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  text-align: left;
  font-size: 15px;
  height: 40px !important;
  border-radius: 5px;
  .add {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    height: 40px;
    border-radius: 5px;
    padding: 5px;
    .el-icon-s-unfold {
      font-weight: 900;
    }
  }
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  height: 760px;
  .search {
    background-color: white;
    border-radius: 5px;
    text-align: left;
    padding: 6px 0px;
    margin-bottom: 20px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .data {
    height: 650px;
  }
  .el-table {
    border-radius: 5px;
    height: 100%;
  }
}
.el-footer {
  height: 30px !important;
  line-height: 30px;
  .block {
    display: flex;
    flex-direction: row-reverse;
  }
}

body > .el-container {
  margin-bottom: 40px;
}
.el-form-item {
  display: inline-block;
}
</style>